<template>
  <div class="home-container">
    <!-- 添加动画Logo -->
    <img src="/logo.svg" alt="AI智能体平台" class="home-logo" />
    
    <h1 class="home-title">AI智能体平台</h1>
    <p class="home-subtitle">探索未来科技，体验智能交互</p>
    
    <div class="app-grid">
      <!-- AI恋爱大师应用卡片 -->
      <div class="app-card" @click="goToLoveApp">
        <div class="card-icon">
          <!-- 爱心图标 SVG -->
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <linearGradient id="loveGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#ff6b9d;stop-opacity:1" />
                <stop offset="50%" style="stop-color:#ff8fab;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ffa8cc;stop-opacity:1" />
              </linearGradient>
              <filter id="loveShadow" x="-50%" y="-50%" width="200%" height="200%">
                <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#ff6b9d" flood-opacity="0.3"/>
              </filter>
            </defs>
            <path d="M24 42L20.55 38.82C10.8 30.06 4.5 24.42 4.5 17.5C4.5 12.42 8.42 8.5 13.5 8.5C16.74 8.5 19.86 10.26 21.75 12.9C22.65 14.22 23.25 15.78 24 17.46C24.75 15.78 25.35 14.22 26.25 12.9C28.14 10.26 31.26 8.5 34.5 8.5C39.58 8.5 43.5 12.42 43.5 17.5C43.5 24.42 37.2 30.06 27.45 38.82L24 42Z" fill="url(#loveGradient)" filter="url(#loveShadow)"/>
            <circle cx="18" cy="18" r="2" fill="#ffffff" opacity="0.8">
              <animate attributeName="opacity" values="0.8;0.4;0.8" dur="2s" repeatCount="indefinite"/>
            </circle>
          </svg>
        </div>
        <h3>AI恋爱大师</h3>
        <p>专业的恋爱咨询顾问，为您提供情感建议和恋爱指导，解决感情困惑</p>
        <div class="card-button">立即体验</div>
      </div>
      
      <!-- AI超级智能体应用卡片 -->
      <div class="app-card" @click="goToManusApp">
        <div class="card-icon">
          <!-- 机器人图标 SVG -->
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <linearGradient id="robotGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                <stop offset="50%" style="stop-color:#764ba2;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
              </linearGradient>
              <filter id="robotShadow" x="-50%" y="-50%" width="200%" height="200%">
                <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#667eea" flood-opacity="0.3"/>
              </filter>
            </defs>
            <!-- 机器人头部 -->
            <rect x="8" y="12" width="32" height="24" rx="6" fill="url(#robotGradient)" filter="url(#robotShadow)"/>
            <!-- 天线 -->
            <circle cx="18" cy="8" r="2" fill="url(#robotGradient)">
              <animate attributeName="r" values="2;3;2" dur="1.5s" repeatCount="indefinite"/>
            </circle>
            <circle cx="30" cy="8" r="2" fill="url(#robotGradient)">
              <animate attributeName="r" values="2;3;2" dur="1.5s" begin="0.5s" repeatCount="indefinite"/>
            </circle>
            <line x1="18" y1="10" x2="18" y2="12" stroke="url(#robotGradient)" stroke-width="2"/>
            <line x1="30" y1="10" x2="30" y2="12" stroke="url(#robotGradient)" stroke-width="2"/>
            <!-- 眼睛 -->
            <circle cx="16" cy="20" r="3" fill="#ffffff">
              <animate attributeName="fill" values="#ffffff;#00ff88;#ffffff" dur="3s" repeatCount="indefinite"/>
            </circle>
            <circle cx="32" cy="20" r="3" fill="#ffffff">
              <animate attributeName="fill" values="#ffffff;#00ff88;#ffffff" dur="3s" begin="0.2s" repeatCount="indefinite"/>
            </circle>
            <!-- 嘴巴 -->
            <rect x="20" y="28" width="8" height="2" rx="1" fill="#ffffff" opacity="0.8"/>
            <!-- 身体 -->
            <rect x="12" y="36" width="24" height="8" rx="4" fill="url(#robotGradient)" opacity="0.8"/>
          </svg>
        </div>
        <h3>AI超级智能体</h3>
        <p>强大的AI助手，能够处理各种复杂任务和问题，提供智能化解决方案</p>
        <div class="card-button">立即体验</div>
      </div>
    </div>
    
    <!-- 添加底部版权信息 -->
    <div class="home-footer">
      <p>© 2025 AI智能体平台 | 探索AI的无限可能</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    /**
     * 跳转到AI恋爱大师应用
     */
    goToLoveApp() {
      this.$router.push('/love-app')
    },
    
    /**
     * 跳转到AI超级智能体应用
     */
    goToManusApp() {
      this.$router.push('/manus-app')
    }
  }
}
</script>

<style scoped>
/* 组件特定样式已在全局样式中定义 */
</style>